<script lang="tsx">
/**
 * 应收对账单
 */
export default {
  name: "income-accounts"
}
</script>

<script lang="tsx" setup>
import {reactive, ref} from 'vue'
import {definePageModel, PageModel} from "@/frame/view/layout/page-model/constructor.ts"
import {getCode} from "@/utils/get-code.ts";
import {CodeRuleTypeEnum} from "@/utils/enum.ts";
import {processRequest} from "@/frame/apis/request";
import OrderDetail from "@/pages/wms/warehouse-otherIn/components/order-detail/index.vue";
import OrderForm from "@/pages/wms/warehouse-otherIn/components/order-form/index.vue";

/**
 * 下拉列表
 */
const reflections = reactive<{
  customerList: any[];
}>({
  customerList: [],
})

/**
 * 获取客户列表
 */
const getCustomerList = async () => {
  const result: any = await processRequest.get("/api/Customer", {
    IsEnable: true,
    currentPage: 1,
    pageSize: 9999
  });
  reflections.customerList = result.dataList;
}
getCustomerList()

/**
 * 页面配置
 */
const pageModelRef = ref()
const config = definePageModel<any>({
  url: "/api/IncomeAccounts",
  searchForm: {
    els: [
      {
        eType: 'el-input',
        prop: "code",
        props: {
          placeholder: "单据编码",
          clearable: true
        }
      },
      {
        eType: 'el-input',
        prop: "customer",
        props: {
          placeholder: "客户名称",
          clearable: true
        }
      }
    ]
  },
  programForm: {
    els: [
      {
        label: "新增",
        eType: "el-button",
        props: {
          type: "primary"
        },
        event: "add"
      }
    ]
  },
  table: {
    page: {
      enable: true,
      pageSize: 20
    },
    props: {
      stripe: false,
      border: false
    },
    operation: {
      width: 370,
      props: {
        fixed: "right"
      },
      /**
       * 操作栏内容
       */
      els: [
        {
          eType: "el-button",
          label: "详情",
          event: "detail",
          props: {
            type: "primary",
            link: true
          },
          hide: false
        }
      ]
    },
    /**
     * 查询内容展示
     */
    els: [
      {
        label: "单据编码",
        prop: "code",
        minWidth: 100
      },
      {
        label: "客户编码",
        prop: "customerCode",
        minWidth: 100
      },
      {
        label: "客户名称",
        prop: "customerName",
        minWidth: 100
      },
      {
        label: "未入账金额",
        prop: "incomeToDo",
        minWidth: 100
      },
      {
        label: "入账金额",
        prop: "incomeDoing",
        minWidth: 100
      },
      {
        label: "已入账金额",
        prop: "incomeDone",
        minWidth: 100
      }
    ]
  },
  /**
   * 新增按钮的弹窗显示内容
   */
  form: {
    title: "新增/编辑",
    width: 500,
    sheetForm: {
      async bindData(data: any) {
        if (!data.id) {
          data.code = await getCode(CodeRuleTypeEnum.应收对账单)
        }
        return data
      },
      labelWidth: "100px",
      els: [
        {
          label: "单据编码",
          eType: "el-input",
          prop: "code",
          renderFn(data: any) {
            return <span>{data.code}</span>
          }
        },
        {
          label: "备注",
          eType: "el-input",
          prop: "remark",
          props: {
            placeholder: "请输入备注",
            clearable: true
          }
        },
        {
          label: "上传文件",
          eType: "el-upload",
          prop: "file",
          props: {
            action: "/development/anqin/api/Upload",
            limit: 1
          }
        }
      ]
    }
  }
})

/**
 * 详情
 */
const orderDetailRef = ref()
const handleDetail = (row: any) => {
  orderDetailRef.value.show({
    id: row.id
  })
}

/**
 * 新增
 */
const handleAdd = () => {
  pageModelRef.value.handleAdd()
}

/**
 * 编辑
 */
const handleEdit = (row: any) => {
  pageModelRef.value.handleEdit(row)
}

/**
 * 删除
 */
const handleDelete = (row: any) => {
  pageModelRef.value.handleDelete(row)
}

/**
 * 刷新
 */
const handleRefresh = () => {
  pageModelRef.value.refreshTableData()
}

</script>

<template>
  <PageModel ref="pageModelRef" :PageModel="config" :reflections="reflections" @add="handleAdd"
             @delete="handleDelete" @detail="handleDetail"
             @edit="handleEdit"
             @refresh="handleRefresh"
  />
  <OrderDetail ref="orderDetailRef"/>
  <OrderForm ref="orderFormRef" @confirm="handleRefresh"/>
</template>